{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
<link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
{% endblock header_tail %}

{% block section_content %}
    <div class="box-header with-border">
        <h3 class="box-title">实用工具</h3>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">正则测试<span style="padding-left: 10px; color: red;font-size: 10px;"></span></h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="form-group">
                        <label>待匹配文本</label>
                        <span style="padding-left: 10px; color: red;font-size: 10px;"></span>
                        <textarea id="textSour" class="form-control" placeholder="在此输入待匹配文本"></textarea>
                    </div>
                    <div class="form-group">
                        <label>正则表达式</label>
                        <input type="text" class="form-control" id="textPattern" placeholder="在此输入正则表达式"
                               value="">
                        <input type="checkbox" value="global" checked="checked" id="optionGlobal" name="optionGlobl"/>全局搜索
            		    <input type="checkbox" value="ignoreCase" id="optionIgnoreCase" name="optionIgnoreCase"/>忽略大小写
                        <input type="submit" class="btn btn-primary btn-sm" value="测试匹配" onclick="return onMatch();">
                    </div>
                    <div class="form-group">
                        <label>匹配结果</label>
                        <textarea class="form-control" readonly="readonly" id="textMatchResult"></textarea>
                    </div>
                    <div class="form-group">
                        <label>替换文本</label>
                        <input type="text" id="textReplace" class="form-control" placeholder="在此输入替换文本">
                        <input type="submit" class="btn btn-primary btn-sm" value="替换" onclick="return onReplace()">
                    </div>
                    <div class="form-group">
                        <label>替换结果</label>
                        <textarea readonly="readonly" id="textReplaceResult" class="form-control"></textarea>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">时间测试<span style="padding-left: 10px; color: red;font-size: 10px;">输入时间字符串，测试是否可以解析该格式的时间。</span></h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="form-group">
                        <label>时间字符串</label>
                        <span style="padding-left: 10px; color: red;font-size: 10px;"></span>
                        <input name="str_datetime" type="text" class="form-control" placeholder="请输入时间字符串，支持各种语言"
                               value="">
                    </div>
                    <div class="form-group">
                        <label>解析结果</label>
                        <input name="result_datetime" type="text" class="form-control" placeholder="点击测试返回解析后的时间"
                               value="">
                    </div>
                    <input type="submit" class="btn btn-primary" id="sub_datetime" value="测试" onclick="test_date()">
                    <input type="submit" class="btn btn-primary" id="feed_datetime" value="反馈">
                </div>
                <!-- /.box-body -->
            </div>
        </div>
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">源代码测试<span style="padding-left: 10px; color: red;font-size: 10px;">输入要测试的链接。</span></h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="form-group">
                        <label>测试网站的编码：</label>
                        <input name="coding" type="text" placeholder="请输入网站编码" value="utf-8">
                        <input type="submit" class="btn btn-primary btn-sm" id="subDowload" value="测试下载" onclick="dowload_test()">
                        <input name="testDowloadUrl" type="text" class="form-control" placeholder="请输入要测试的链接" value="">
                    </div>
                    <div class="form-group">
                        <label>下载结果</label>
                        <span>状态码</span>
                        <input type="text" id="dowloadStatusCode" disabled>
                        <!--<span style="padding-left: 10px; color: red;font-size: 10px;" id="dowloadStatusCode"></span>-->
                        <textarea class="form-control" readonly="readonly" id="textSourceCode" rows="5px"></textarea>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
    </div>
{% endblock section_content %}
{% block jquery_js %}
<script src="{% static 'public/js/password.js' %}"></script>
<script>
    function changeColor(id, color) {
        $(id).parent().parent().addClass("active");
        $(id).children().css("color", color);
    }
    $('#myTasks').addClass("active");
    changeColor("#debug_config", "#00FF7F");

    // 时间解析测试
    function test_date() {
        var str_datetime = $("input[name='str_datetime']").val();
        if(str_datetime.length > 100){
            $("input[name='result_datetime']").val('字符串长度不能大于100');
        }else {
            $.post(
                "{% url 'task:debug_util' %}",
                {
                    utype: 'date',
                    str_datetime: str_datetime,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                function(result){
                    $("input[name='result_datetime']").val(result.ctime);
                }
            )
        }
    }

    $("input[name='str_datetime']").bind("input propertychange",function(){
        test_date()
    });

    // 网站源码测试
    function dowload_test() {
        var test_url = $("input[name='testDowloadUrl']").val();
        var coding = $("input[name='coding']").val();
        if(!test_url || !coding){
            alert('测试链接或编码不能为空')
        }else {
            $.post({
                url: "{% url 'task:debug_util' %}",
                data: {
                    utype: 'testDowload',
                    test_url: test_url,
                    coding: coding,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (res) {
                    $("#textSourceCode").val(res.response);
                    $("#dowloadStatusCode").val(res.status_code);
                }
            })
        }
    }

</script>
<!--正则表达式-->
<script language="javascript">
    function isValidFields() {
        var textSour = document.getElementById("textSour");
        if (null==textSour.value || textSour.value.length<1) {
            textSour.focus();
            alert("请输入待匹配文本");
            return false;
        }
        var textPattern = document.getElementById("textPattern");
        if (null==textPattern.value || textPattern.value.length<1) {
            textPattern.focus();
            alert("请输入正则表达式");
            return false;
        }
        return true;
    }
    function buildRegex() {
        var op = "";
        if (document.getElementById("optionGlobal").checked)op = "g";
        if (document.getElementById("optionIgnoreCase").checked)op = op + "i";
        return new RegExp(document.getElementById("textPattern").value, op);
    }
    function onMatch() {
        if (!isValidFields())
        return false;
        document.getElementById("textMatchResult").value = "";
        var regex = buildRegex();
        var result = document.getElementById("textSour").value.match(regex);
        if (null==result || 0==result.length) {
            document.getElementById("textMatchResult").value = "（没有匹配）";
            return false;
        }
        if (document.getElementById("optionGlobal").checked) {
            var strResult = "共找到 " + result.length + " 处匹配：\r\n";
            for (var i=0;i < result.length;++i)strResult = strResult + result[i] + "\r\n";
            document.getElementById("textMatchResult").value = strResult;
        }
        else {
            document.getElementById("textMatchResult").value= "匹配位置：" + regex.lastIndex + "\r\n匹配结果：" + result[0];
        }
        return true;
    }
    function onReplace() {
        var str = document.getElementById("textSour").value;
        var regex = buildRegex();
        document.getElementById("textReplaceResult").value= str.replace(regex, document.getElementById("textReplace").value);
    }
</script>
{% endblock jquery_js %}

